<template>
  <div class="comment-rules">
    <div class="rules-slogan" @click="showRules(false)">
      <div class="left">
        <h2>我要评议</h2>
        <p><span v-for="(text, index) in sloganList" :key="index" v-text="text" /></p>
      </div>
      <div class="right">
        <img mode="widthFix" src="../../../static/images/index/rules-title.png" />
      </div>
    </div>
    <uni-popup ref="popup" background-color="transparent" :is-mask-click="false" @change="change">
      <div class="rules-content">
        <div>
          <div class="rules-title">
            <h2>
              <span>评议规则</span>
            </h2>
            <uni-icons class="close" type="closeempty" size="20" color="#333333" @click="close" />
          </div>
          <div class="rules-detail">
            <p>进入评议页面后，您可选择市直或县区进行评议，对照市直、县区相关参评部门（单位）一览表，点击参评部门（单位），可看到该部门（单位）每一名参评人员姓名、照片、从事业务、岗位职责等信息。</p>
            <p>每个被评议人员都设置“满意”、“比较满意”、“基本满意”、“不满意”和“不了解情况”5个选项，其中，“基本满意”下设“服务意识差”、“工作效率低”、“其他”3个选项，“其他”项可以文字形式输入具体基本满意的事项和问题；“不满意”下设“办事推拖绕”、“吃拿卡要”、“其他”事项3个选项，“其他”项也可以文字形式输入具体不满意的事项和问题。对有些部门确未接触过、不了解情况的，可选择“不了解情况”选项。</p>
            <p>每次可评议1人或多人，完成相关选项选择和内容填写后，点击“提交”选项即可完成评议。</p>
          </div>
          <div class="btn-content">
            <button type="primary" @click="close">我已了解</button>
          </div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
  export default {
    name: 'CommentRules',
    components: {},
    props: {},
    data() {
      return {
        sloganList: [ '以亮促评', '以评促干', '以干促优' ],
        isShowSelectRole: false,
      };
    },
    mounted() {
    },
    created() {
    },
    methods: {
      showRules(isShowSelectRole = false) {
        this.popupShow(true);
        this.isShowSelectRole = isShowSelectRole;
      },
      close() {
        this.popupShow(false);
      },
      popupShow(isShow) {
        const popup = this.$refs.popup[ 0 ] || this.$refs.popup;
        if (isShow) {
          popup.open('center');
          return;
        }
        popup.close();
      },
      change(e) {
        if (!e.show) {
          setTimeout(() => {
            this.$emit('close', { isShowSelectRole: this.isShowSelectRole });
          }, 500);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .comment-rules {
    padding: 15px;
    > div.rules-slogan {
      display: flex;
      align-items: center;
      background-color: white;
      border-radius: 10px;
      padding: 20px 30px;
      .left {
        flex: 1;
        h2 {
          font-size: 18px;
          line-height: 1;
          font-weight: 600;
          color: black;
        }
        p {
          margin-top: 15px;
          font-size: 12px;
          line-height: 1;
          color: #7c7c7c;
          span {
            & + span {
              margin-left: 10px;
            }
          }
        }
      }
      .right {
        margin-left: 15px;
        img {
          display: block;
          width: 50px;
        }
      }
    }
    .rules-content {
      width: 80vw;
      height: 80vh;
      display: flex;
      align-items: center;
      > div {
        background-color: white;
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        .rules-title {
          position: relative;
          padding: 20px 30px;
          text-align: center;
          border-radius: 10px;
          h2 {
            position: relative;
            line-height: 1;
            padding: 0 30px;
            display: inline-block;
            span {
              font-size: 16px;
              color: #2677f5;
              display: block;
            }
            &:after,
            &:before {
              display: block;
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              background-color: #2677f5;
              height: 1px;
              width: 20px;
            }
            &:after {
              right: 0;
            }
            &:before {
              left: 0;
            }
          }
          .close {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .rules-detail {
          flex: 1;
          overflow: auto;
          padding: 0 15px;
          max-height: calc(80vh - 140px);
          p {
            font-size: 14px;
            color: #5E7B93;
            text-indent: 28px;
            line-height: 1.5;
          }
        }
        .btn-content {
          padding: 15px;
          button {
            background-color: #0669f0;
          }
        }
      }
    }
  }
</style>
